<html lang="en">

<head>

  <meta charset="UTF-8">

  <link rel="apple-touch-icon" type="image/png"
    href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
  <meta name="apple-mobile-web-app-title" content="CodePen">

  <link rel="shortcut icon" type="image/x-icon"
    href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">

  <link rel="mask-icon" type="image/x-icon"
    href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
    color="#111">


  <title>CodePen - Generative Rorschach Inkblot</title>




  <style>
    body {
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background: #ffffff;
      cursor: pointer;
    }

    svg {
      height: 100vh;
      min-height: 400px;
    }

    #svgRight {
      transform: scaleX(-1);
    }

    /* Before using SMIL, I used CSS animation to fade in the circles. The browser support was spotty, so I changed to SMIL. But for some reason, keeping this CSS animation here but commented out allows the codepen preview snapshot to animate */
    /* 
circle{
  animation: fadeIn 200ms;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
} */
  </style>

  <script>
    window.console = window.console || function (t) { };
  </script>



  <script>
    if (document.location.search.match(/type=embed/gi)) {
      window.parent.postMessage("resize", "*");
    }
  </script>


  <input type="hidden" id="_w_simile" data-inspect-config="3">
  <script type="text/javascript"
    src="chrome-extension://odphnbhiddhdpoccbialllejaajemdio/scripts/inspector.js"></script>
</head>

<body translate="no">
  <svg id="svgMain" viewBox="0 0 500 500" height="500" width="500" x="0" y="0">
    <defs>
      <filter id="gloop" height="125%">
        <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur"></feGaussianBlur>
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 50 -20" result="goo">
        </feColorMatrix>
      </filter>
    </defs>

    <g id="svgGroup" filter="url(#gloop)">
      <circle r="41" cx="309" cy="157" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="33" cx="352" cy="61" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="59" cx="286" cy="359" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="54" cx="644" cy="152" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="30" cx="483" cy="72" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="50" cx="218" cy="79" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="32" cx="559" cy="151" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="6" cx="495" cy="219" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="34" cx="398" cy="194" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="8" cx="363" cy="342" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="45" cx="448" cy="109" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="14" cx="602" cy="225" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="46" cx="200" cy="125" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="36" cx="365" cy="185" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="37" cx="603" cy="33" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="18" cx="605" cy="228" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="8" cx="227" cy="143" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="10" cx="452" cy="270" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="57" cx="509" cy="328" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="40" cx="260" cy="165" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="29" cx="267" cy="198" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="29" cx="209" cy="373" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="23" cx="539" cy="146" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="49" cx="300" cy="172" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="27" cx="319" cy="449" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="3" cx="608" cy="374" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="17" cx="240" cy="464" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="18" cx="481" cy="187" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="37" cx="329" cy="51" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="38" cx="592" cy="327" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="24" cx="285" cy="323" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="12" cx="342" cy="215" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="44" cx="177" cy="495" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="46" cx="354" cy="354" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="10" cx="151" cy="370" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="11" cx="481" cy="112" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="54" cx="394" cy="441" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="58" cx="605" cy="327" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="16" cx="505" cy="262" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="31" cx="185" cy="6" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="28" cx="206" cy="375" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="15" cx="295" cy="386" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="7" cx="366" cy="496" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="17" cx="616" cy="489" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="11" cx="589" cy="66" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="24" cx="173" cy="48" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="36" cx="646" cy="394" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="58" cx="646" cy="457" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="23" cx="490" cy="495" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
      <circle r="9" cx="458" cy="291" opacity="1" fill="black">
        <animate attributeName="opacity" from="0" to="1" fill="freeze" dur="200ms"></animate>
      </circle>
    </g>
  </svg>

  <svg id="svgRight" viewBox="0 0 500 500" height="500" width="500" x="0" y="0">
    <use href="#svgGroup"></use>
  </svg>
  <script
    src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>


  <script id="rendered-js">
    const body = document.body;
    const group = document.getElementById("svgGroup");


    // Instructions for making a circle
    function drawCircle() {
      // Make SVG circle
      let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
      circle.setAttribute("r", Math.floor(Math.random() * 60));
      circle.setAttribute("cx", Math.floor(Math.random() * 500) + 150);
      circle.setAttribute("cy", Math.floor(Math.random() * 500));
      circle.setAttribute("opacity", "1");
      circle.setAttribute("fill", "black");

      // Make SMIL animation
      let animation = document.createElementNS("http://www.w3.org/2000/svg", "animate");
      animation.setAttribute("attributeName", "opacity");
      animation.setAttribute("from", "0");
      animation.setAttribute("to", "1");
      animation.setAttribute("fill", "freeze");
      animation.setAttribute("dur", "200ms");

      // Append animation to circle, append circle to g
      circle.appendChild(animation);
      group.appendChild(circle);

      // Begin animation
      animation.beginElement();
    }

    // Draw a random circle every 5 milliseconds until limit is reached
    function drawRandom() {
      for (i = 0; i < 50; i++) {
        if (window.CP.shouldStopExecution(0)) break;
        setTimeout(function timer() {
          drawCircle();
        }, i * 3);
      } window.CP.exitedLoop(0);
    }

    //Remove all SVG shapes from DOM
    function removeAll() {
      while (group.firstChild) {
        if (window.CP.shouldStopExecution(1)) break;
        group.removeChild(group.lastChild);
      } window.CP.exitedLoop(1);
    }

    //On click, remove all shapes and draw new shapes
    body.addEventListener("click", function () {
      removeAll();
      drawRandom();
    });

    //On page load, draw new shapes
    drawRandom();
//# sourceURL=pen.js
  </script>







</body>

</html>